<template>
    <div class="differenceDetial">
        <div class="contractNo" v-if="contractNo">合同号：{{contractNo}}</div>
        <Table :columns="details" :data="detailsData">
            <!-- 类型 -->
            <template slot-scope="{ row }" slot="sourceType">
                <span>{{getTitle('receiptSourceType',row.sourceType)}}</span>
            </template>
            <!-- 还款方式 -->
            <template slot-scope="{ row }" slot="writeTarget">
                <span>{{getTitle('writeTarget',row.writeTarget)}}</span>
            </template>
        </Table>
        <div class="total">
            <span>总计：</span>
            <span>{{total}}</span>
        </div>
    </div>
</template>

<script>
    import {getReceiptRecord} from "_p/basic/api/contract/contract-close/index";
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";

    export default {
        name: "receiptInfo",
        components: {},
        props: {
            dataDict: {
                type: Object,
                required: true
            },
            differenceModal: {
                type: Boolean,
                require: true
            },
            contractNo: {
                type: String
            }
        },
        data() {
            return {
                loading: true,
                // 租金
                details: [
                    {
                        title: "收款日期",
                        key: "succeedTime"
                    },
                    {
                        title: "类型",
                        key: "writeTarget",
                        slot: 'writeTarget',
                    },
                    {
                        title: "收款号",
                        key: "sourceAccount"
                    },
                    {
                        title: "还款方式",
                        key: "sourceType",
                        slot: 'sourceType',
                    },
                    {
                        title: "溢缴款",
                        key: "unusedAmt"
                    }
                ],
                detailsData: []
            };
        },
        methods: {
            init() {
                this.getReceiptRecord();
            },
            getReceiptRecord() {
                let data = [];
                getReceiptRecord(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.detailsData = res.data;
                    }
                });
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        },
        computed: {
            total() {
                const {detailsData} = this;
                let num = 0, sum = 0;
                detailsData.forEach(e => {
                    detailsData[num] ? (sum += Number(detailsData[num].unusedAmt)) : "";
                    num++;
                });
                return sum.toFixed(2);
            }
        },
        // watch
        mounted() {
            this.init();
        },
        beforeUpdate() {
            this.init();
        }
    };
</script>
<style scoped lang="less">
    .total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-flow: row nowrap;
        padding: 16px 0;

        span {
            display: inline-block;
            width: 20%;
            padding-left: 18px;
            padding-right: 18px;
        }
    }
</style>
